<template>
    <div class="mnLayout" v-loading="loading" element-loading-text="loading..." element-loading-background="white">
        <el-card class="Box" v-if="info?.id">
            <div class="avatar" v-show="!loading">
                <el-avatar :size="100" :src="'/api/hotel/image/' + info?.id" />
                <span class="imgShadow"></span>
                <el-icon :size="20"  class="changeAva" @click="changeAva"  v-show="isRevise"><Refresh /></el-icon>
            </div>
            <div class="infoBox">
                <p>
                    <span>ID</span>
                    <input :placeholder="info.id.toString()" disabled>
                </p>
                <p>
                    <span>姓名</span>
                    <input v-model="info.name" :disabled="!isChange.uname" v-blur>
                    <el-icon :size="20" @click="isChange.uname = !isChange.uname" class="afterI" v-show="isRevise">
                        <Refresh v-if="!isChange.uname"/>
                        <Check v-else color="red"/>
                    </el-icon>
                </p>
                <p>
                    <span>联系电话</span>
                    <input v-model="info.code" :disabled="!isChange.phone">
                    <el-icon :size="20" @click="isChange.phone = !isChange.phone" class="afterI" v-show="isRevise">
                        <Refresh v-if="!isChange.phone"/>
                        <Check v-else color="red"/>
                    </el-icon>
                </p>
                <p>
                    <span>创建时间</span>
                    <input :placeholder="formatYMD(Number(info.creat_time))" disabled>
                </p>
                <p>
                    <span>身份</span>
                    <input :placeholder="info.status" disabled/>
                </p>
            </div>
            <div class="btnBox">
                <button @click="isRevise = true" v-show="!isRevise">修改</button>
                <button v-show="isRevise" @click="save">保存</button>
            </div>
        </el-card>
    </div>
    <el-dialog v-model="dialog" title="上传图片">
        <el-upload
            action="/api/hotel/uploadImage"
            :data="{ id:info?.id}"
            name="file"
            :headers="{ token: getToken('token') }"
        >
            <el-icon><Plus /></el-icon>
        </el-upload>
    </el-dialog>
</template>

<script lang="ts" setup>
import { useUserInfoStore } from '@/store/userInfoState'
import { onMounted, watch, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { formatYMD } from '@/utils/format'
import { getToken } from "@/utils/local"

type infoType = {
    code:number
    creat_time:string
    id:number
    isStatus: boolean
    name:string
    status: string
}
const store = useUserInfoStore()
const router = useRouter()
let info = ref<infoType>()
let isRevise = ref<boolean>(false)
let loading =ref<boolean>(true)
let dialog = ref<boolean>(false)    //头像弹出层
const isChange = reactive({     //对应的是否可修改
    uname:false,
    phone:false,
    address:false,
})

onMounted(() => {
   
    
})
function changeAva() {
    dialog.value = true
}
function save(){
    console.log(info.value);
}
watch(() => store.user,(val:any) => {
    if (val){
        loading.value = false
        info.value = val
    }
},{ immediate:true })
watch(() => isRevise.value,() => {
    loading.value = true
    let timer = setTimeout(() => {
        clearTimeout(timer)
        loading.value = false
    },500)
})
 </script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1400px){
    .Box{
        width: 85%;
    }
}
@media  screen and (min-width: 1400px) and (max-width: 1600px){
    .Box{
        width: 80%;
    }
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .Box{
        width: 60%;
    }
}
.mnLayout{
    @include allBack;
    @include flexRowCenter;
    min-width: 1000px;
    padding: 80px ;
}
.Box{
    position: relative;
    @include flexColumnCenter;
}
.avatar{
    position: absolute;
    @include flexRowCenter;
    left: calc(50% - 50px);
    top: -70px;
    z-index: 9;
}
.changeAva{
    cursor: pointer;
    position: absolute;
    right: 3px;
    bottom: 0;
    background: #ecf0f1;
    border-radius: 50px;
}
.imgShadow{
    position: absolute;
    z-index: -1;
    left: -5px;
    top: -5px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rebeccapurple;
    opacity: 0.3;
}
.infoBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 30px 20px;
    & p{
        width: calc(50% - 20px);
        text-align: left;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        position: relative;
    }
    & p span:nth-child(1){
        width: 130px;
        @include flexRowCenter;
        background: rgb(52, 152, 219,0.2);
        padding: 10px 0;
        box-sizing: border-box;
        border-radius: 8px;
    }
    & p input:nth-child(2){
        padding: 0 10px;
        box-sizing: border-box;
        outline: none;
        border: none;
        height: 40px;
        font-size: 16px;
        background: rgb(26, 188, 156,0.2);
        color: #222222;
        border-radius: 8px;
    }
    & p input:nth-child(2)::placeholder{
        color: #999999;
    }
    & p:nth-child(2):disabled{
        background: #b2bec3
    }
}
.btnBox{
    width: 100%;
    @include flexRowCenter;
    gap: 20px;
    & button{
        width: 35%;
        border: none;
        background: #3498db;
        color: white;
        outline: none;
    }
    & button:hover{
        background: #2980b9;
    }
}
.afterI{
    cursor: pointer;
    border-radius: 5px;
    transition: all .5s;
    &:hover{
        background: #f5f6f7;
    }
}
.uploadBox{
    width: 100% !important;
    align-items: start !important;
    & span:nth-child(1){
        margin-top: 10px;
    }
    & span:nth-child(2){
        display: flex;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
        gap: 20px;
        width: calc(100% - 200px);
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        background: rgb(225, 112, 85,0.5);
    }
}
.descBox{
    width: 100% !important;
    align-items: start !important;
    & span:nth-child(1){
        margin-top: 10px;
    }
    & textarea:nth-child(2){
        outline: none;
        width: calc(100% - 200px);
        border: none;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        background: rgb(225, 112, 85,0.5);
    }
}
:deep(.el-card) {
    overflow: visible;
    border-radius: 12px;
}
</style>